<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 14:05:02
 * @LastEditors: Hzl
 * @LastEditTime: 2021-09-28 18:57:56
-->
<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <Header></Header>
    </div>
    <!-- /头部 -->

    <!-- 体部 -->
    <div class="center">
      <div class="wrapper">
        <!-- 获取文章标题 -->
        <div class="title">{{articleList.title}}</div>
        <div class="time">
          <!-- 发表时间 -->
          发表时间：<span>{{articleList.publishTime | fmtDate}}</span>
          <!-- 阅读次数 -->
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          阅读次数：<span>{{articleList.readTimes}}</span>
        </div>
        <div class="bottom_1" v-html="articleList.content"></div>
      </div>
    </div>
    <!-- /体部 -->

    <!-- 底部 -->
    <div class="bottom">
      <Footer></Footer>
    </div>
    <!-- /底部 -->
  </div>
</template>

<script>
//1.引入头部组件
import Header from '../components/Header.vue'
//1.引入底部组件
import Footer from '../components/Footer.vue'
import {get} from '../utils/request'
export default {
  //2.注册局部组件
  components:{
    Header,
    Footer
  },
  data(){
    return{
      articleList:{},
      id:0
    }
  },
  created(){
    //获取list传来的id
    this.id=this.$route.query.id
    this.loadDetails()
  },
  methods:{
    //加载文章详情页
    loadDetails(){
      let url='/index/article/findById'
      get(url,{id:this.id}).then(res=>{
        this.articleList=res.data
      })
    }
  }
}
</script>

<style lang="scss">
  .center{
    background-color: #ecf6f2;
    padding: 1em .5em;
    .wrapper{
      background-color: #fff;
      min-height: 500px;
      .title,.time{
        text-align: center;
      }
      .title{
        color: #2772c4;
        font-size: 30px;
        line-height: 49px;
        padding: 0 0 18px 0;
        font-weight: bold;
      }
      .time{
        color: #207adb;
        border-bottom: 1px solid #d2d2d2;
        padding-bottom: 12px;
        font-weight: bold;
      }
      .bottom_1{
        font-size: 16px;
        padding: 25px 0;
        color: #313131;
        overflow: hidden;
      }
    }
  }
</style>